<template>
    <view class="content">
        <van-popup
            position="bottom"
            @click-overlay="closePopup"
            :show="show"
            round
            z-index="104"
            custom-style="width: 100%;background:#ffffff;overflow: hidden; ">
            <view class="popup-content">
                <view class="popup-main">
                    <!-- <scroll-view class="scroll-content " scroll-y :lower-threshold="120" show-scrollbar="false"> -->
                    <template v-if="symbol=='sex'"><van-picker :columns="columns" @change="onChangeSex" :default-index="defaultIndex"/> </template>
                    <template v-if="symbol=='birthday'"> <van-datetime-picker show-toolbar="false"  type="date" :value="currentDate" @input="onInput" :max-date="maxDate" :min-date="minDate" :formatter="formatter" @confirm="confirmCurrentDate" @cancel="cancelSelected"/></template>
                    <!-- </scroll-view> -->
                    
                </view>

                <view class="bottom">
                    <van-button type="primary"  @click="onClickbutton">确认</van-button>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// const today = new Date();
// const year = today.getFullYear();
// const month = today.getMonth()+1;
// const day = today.getDate();
// // 计算90年前的年份
// const minYear = year -100;
// // 创建代表90年前的今天的日期对象
// const minDate = new Date(minYear,month,day).getTime;
const date = new Date('1905-01-01T00:00:00');
const timestamp = date.getTime();
console.log(timestamp,'timestamp');

export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        symbol:{
            type:String,
            default:()=>''
        },
        paramsInfo:{
            type:String,
            default:()=>''
        }
       
    },
    data () {
        return {
            curS: 0,
            curSName: '',
            date: '',
            option: {},
            url: '',
            columns: [
                { text: '女', value: 'female' },
                { text: '男', value: 'male' },
            ],
            defaultIndex:0,
            selectedSex:'未设置', // 用于存储选中的性别
            selectedBirth:'未设置',
            currentDate:'', //new Date().getTime()
            maxDate:new Date().getTime(),
            minDate:timestamp,
            formatter(type,value){
                if(type==='year'){
                    return `${value}年`
                }
                if(type==='month'){
                    return `${value}月`
                }
                if(type==='day'){
                    return `${value}日`
                }
                return value
            }

        }
    },

    computed: {
    },

    watch: {
        paramsInfo:{
            immediate:true,
            handler(newVal){
               console.log(newVal,'newVal',new Date().getTime(),new Date(newVal).getTime() )
               this.defaultIndex= this.symbol=='sex'? newVal:0
               const birthday = new Date(newVal).getTime() 
               this.currentDate = this.symbol=='birthday'? birthday:new Date().getTime()
            }
        }
    },
    onLoad () {

    },
    onReady () {},

    methods: {

        formatterDate(currentDate){
            const date = new Date(currentDate);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            console.log(`${year}-${month}-${day}`);
            this.selectedBirth=`${year}-${month}-${day}`
        },
        /**
         * 将时间戳转换为 YYYY-MM-DD 格式的日期
         * @param {number} timestamp 时间戳（毫秒或秒级）
         * @returns {string} 格式化后的日期字符串（如 2025-03-16）
         */
        formatTimestampToDate(timestamp) {
            // 处理秒级时间戳（若输入为秒，需转为毫秒）
            const time = timestamp.toString().length === 10 ? timestamp * 1000 : timestamp;
            const date = new Date(time);

            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需 +1
            const day = String(date.getDate()).padStart(2, '0');

            return `${year}-${month}-${day}`;
        },
        // 选择性别
        onChangeSex(e){
            const {picker,value,index}=e.detail
            console.log(e,'000000000')
            this.selectedSex=value.text
            console.log(this.selectedSex,'性别')
            // uni.setStorageSync('selectedSex',value)
        },
        // 
        onInput(e){
            this.currentDate=e.detail
            this.formatterDate(this.currentDate)
        },

        // 关闭弹窗
        closePopup () {
            const sign='close'
            this.$emit('closePopup',sign)
        },

        // 选择生日 右上角确认按钮
        confirmCurrentDate(e){
            // this.formatterDate(this.currentDate)
            console.log(e,'this.currentDate')
            this.formatTimestampToDate(e.detail)
            this.selectedBirth=this.formatTimestampToDate(e.detail)
            console.log(this.selectedBirth,'this.selectedBirth')
            this.$emit('submitCurrentDate',this.selectedBirth)

        },

        // 取消按钮
        cancelSelected(){
            this.$emit('closePopup')
        },

        // 页面底部的确定按钮
        onClickbutton () {
            const sign='button'
            // uni.setStorageSync('selectedSex',this.selectedSex)
            if(this.symbol==='sex'){
                this.$emit('submitCurrentDate',this.selectedSex)
            }else if(this.symbol==='birthday'){
                this.$emit('submitCurrentDate',this.selectedBirth)
            }
        },


    }

}
</script>
<style lang="scss" scoped>
// @import '@/styles/variables.scss';

// 滚动
.scroll-content {
    flex: 1;
    height:1px;
}
// 提示框
.popup-content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
    padding-top: 48rpx;
    padding-bottom: calc(60rpx + env(safe-area-inset-bottom));

    border-radius: 16px;
    overflow: hidden;
    // height:100vh;
    height: 100%;

    .popup-main {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        padding:0rpx 48rpx;
    }

    .popupTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }

    // 商品排序
    .tabsBox {
        padding-top: 21px;
        padding-bottom: 21px;
        display: flex;
        align-items: center;
        .popup_item {
            // font-weight: bold;
            font-size: 14px;
            text-align: left;
            color: #111111;
            line-height: 14px;
            margin-right: 22px;

            &.active {
                font-weight: bolder;
                // color: #FF6203;
            }
        }

        .popup_item:last-child {
            margin-right: 0px;
        }
    }
    .coupon-tips{
        width: 100%;
        color: #888888;
        font-size: 11px;
        text-align: left;
    }
    // 我的优惠券盒子
    .mycoupon_box{
        margin-top: 15px;
        padding-bottom:75px;

    }

    // 优惠券列表
    .listItem {
        // height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding:17px 24px;
        border: 1px solid #D4D4D4;
        margin-bottom: 12px;
        // background-color: paleturquoise;
        height: 87px;

        .listItemLeft {
            // width: 85%;
            display: flex;
            align-items: center;

            .itemLeft{
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 30%;
                // min-width:fit-content ;

                .top{
                    // font-size: 0;
                    // min-width:fit-content ;
                    // span{
                        font-size: 32px;
                        line-height: 1;
                        color: #FF6203;
                        width: 100%;
                        height: 32px;
                    // }
                    span{
                        font-family: 'Courier New', Courier, monospace;
                    }
                }
                // 优惠券失效的面值样式
                .shixiao{
                    color:#B3B3B3 ;
                    font-size: 32px;
                    line-height: 1;
                    width: 100%;
                    height: 32px;
                }
                .bottom{
                    margin-top: 10px;
                    font-size: 13px;
                    line-height: 13px;
                    color: #111111;
                    width: 100%;
                }
            }
            .itemRight{

                display: flex;
                flex-direction: column;
                text-align: left;
                align-items: center;
                margin-left: 26px;
                // position: relative;
                // 优惠券名称
                .couponName{
                    // position: absolute;
                    // top: 0px;
                    width: 100%;
                    text-align: left;
                    font-size: 14px;
                    color: #111111;
                    line-height: 14px;
                }
                // 限定商品使用
                .term{
                    // position: absolute;
                    // top: 5%;
                    width: 100%;
                    text-align: left;
                    font-size: 13px;
                    color: #888888;
                    line-height: 13px;
                    margin-top: 7px;
                }
                // 距离失效剩余的时间
                .deadline{
                    width: 100%;
                    font-size: 13px;
                    text-align: left;
                    color: #FF6203 ;
                    line-height: 13px;
                    margin-top: 7px;
                    // position: absolute;
                }
                // 过期  失效
                .outDate{
                  width: 100%;
                  font-size: 13px;
                  text-align: left;
                  color: #B3B3B3;
                  line-height: 13px;
                  margin-top: 7px;
                }
            }
        }
        // 复选框的 圆圈
        .checked-img {
            height: 16px;
            width: 16px;
        }
        // 已过期按钮
        .outOfDate{
            border-radius:12px;
            background: #ffffff;
            font-weight: 500;
            font-size: 13px;
            line-height: 1;
            text-align: center;
            color: #888888;
            padding: 5px 13px;
            border: 1px solid #D4D4D4;
        }

        .iconDiv {
            .icon {
                width: 12px;
                height: 12px;
            }
        }
    }

    .listItem:last-child {
        margin-bottom: 0px;
    }

    // 加入购物车按钮
    .goodsAction {
        margin-top: 22px;
        width: calc(100% - 48px);
        text-align: center;
        // background-color: aquamarine;
        // height: 84px;
    }

    .button {
        width: 100%;
        font-size: 16px;
        color: #ffffff;
        height: 44px;
        line-height: 44px;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}

::v-deep .van-cell {
    border: 1px solid #888888;
    // background: #FF6203;
}
::v-deep .van-cell--hover .hover-class{
    border: 1px solid #888888;
}

::v-deep .van-empty {
    border-radius: 12px;
    padding: 0px !important;
}

::v-deep .van-empty__image{
    width: 105px !important;
    height: 88px !important;
    text-align: center;
}
::v-deep .van-empty__image__img{
    // width: 105px;
    // height: 88px;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>
